import React, { forwardRef, useEffect } from 'react';
import { getMessage } from '@inbiz/react';
import { inbiz } from '@inbiz/core';
import { defaultProps } from '../../designer/schema';
import { connect, mapProps } from '@formily/react';
import LangProvider from '@inbiz/basic/container';
import zhCN from './locales/zh-CN';
import enUS from './locales/en-US';
import jaJP from './locales/ja-JP';
import View from './components/view';

// ### 事件
// 1. onload 数据请求完成，首次渲染时触发
// 2. onSelect 选中、取消选中更新时触发，第一个参数为当前的value， 第二个参数为 选中。还是取消选中, 第3个参数 为当前项的所有数据 antd
// 3. onExpand  antd
// 4. onRightClick antd
// 5. onSuccess, 列表数据加载成功时执行, 参数中存在列表数据
// 6. onError, 数据请求失败时执行
// 7. onClick 点击标签时执行  点击按钮时也需要执行， 用参数判断 点击的是不同的按钮（新增、编辑、自定义）

export type IProps = {
  controlId: string;
  viewMode?:string;
  callBackEvents?: {
    onBeforeOperationAsync?: (type, data) => Promise<boolean>;
    onBeforeRelation?: <T extends { id: string; query: object; queryData: object }>(
      Relation: T,
      data: object,
    ) => boolean | T; // 操作关联组件前
    onTitleRender?: (data: object) => React.ReactNode;
    /**
     * treeNameKey：显示字段
     * searchKey：搜索值
     */
    onSearch?: (treeNameKey: any, searchKey: string) => Promise<any>;
    onRequest?: (data: object) => Promise<any>
  };
  emit?: {
    /** 自动完成框选中条目时触发 */
    (type: 'onSelect', value?: string, node?: object): void;
    (type: 'onExpand', value?: Array<string>, node?: object): void;
    (type: 'onRightClick', info?: object): void;
    (type: 'onload'): void;
    (type: 'onError'): void;
    (type: 'onClick', action?: 'string'): void;
    (type: 'onDragStart', data: { event: any; node: React.ReactNode }): void;
    (type: 'onDragEnd', data: { event: any; node: React.ReactNode }): void;
    (
      type: 'onDragEnter',
      data: { event: any; node: React.ReactNode; expandedKeys: string[] },
    ): void;
    (type: 'onDragLeave', data: { event: any; node: React.ReactNode }): void;
    (
      type: 'onDrop',
      data: {
        event: any;
        node: React.ReactNode;
        dragNode: React.ReactNode;
        dragNodesKeys: string[];
      },
    ): void;
    (type: 'onDragOver', data: { event: any; node: React.ReactNode }): void;
    (type: any, ...arg: any): void;
  };
  prefixCls?: string;
  className?: string;
  inbiz: inbiz;
  value?: string | number;
  sourceModel?: string;
  sourcetype?: string;
  title: any;
  selectedKeys?: string[];
  disabled?: boolean;
  readOnly?: boolean;
  relationField?: string;
  selectComponent?: string[];
  placeholder?: string;
  search?: boolean;
  unSelected?: boolean; // 单选是否允许取消选中
  searchPosition: 'left' | 'right';
  searchIcon: { type: string; color: string };
} & typeof defaultProps;

const Tree = forwardRef((props: IProps, ref: any) => {
  return (
    <LangProvider locales={{ 'zh-CN': zhCN, 'ja-JP': enUS, 'en-US': jaJP }}>
      <View ref={ref} {...props} />
    </LangProvider>
  );
});

export default connect(
  Tree,
  mapProps({}, (props: any, field: any) => {
    const { addonAfter, prefix, ...others } = props;
    field.decoratorProps.addonAfter = addonAfter;
    field.decoratorProps.addonBefore = prefix;
    if (others.search) {
      others.searchPlaceholder =
        getMessage(others.searchPlaceholder) || getMessage('Tree.searchKeywords');
    }
    return { ...others };
  }),
);
